<template>
    <div :class="{ 'search_height': lgt.nameH1, 'search_bgc': lgt.title }">
        <div class="w">
            <div class="search_input">
                <h1 class="search_bt" v-if="lgt.nameH1">{{ nameH1 }}</h1>
                <div :class="{ 'search_padTop': lgt.nameH1, 'search_s': lgt.title }">
                    <a-input class="search_ss" style="border-radius: 50px; padding-left: 40px;" v-model:value="value.title"
                        placeholder="示例：办公用品 蒙牛乳业，多个关键词用空格隔开" />
                    <div class="search_buttons" @click="popularSearches">
                        <img style="margin-right: 4px; width: 21px; height: 21px;" src="@/assets/img/sousuo.png" alt="">
                        查询
                    </div>
                </div>
                <div class="popular_box">热门搜索：<span class="popular" v-for="item in popularLiss" :key="item.id"
                        @click="insearch(item.hot_name)">{{ item.hot_name
                        }}</span></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRadio1Store, useSearchStore } from '@/pain/search/search';
import { onMounted, ref, reactive } from 'vue';
import { getHotSearch } from '@/Api/shoop/index'
let nameH1 = ref('')
let lgt = reactive({
    title: false,
    nameH1: false
})
let value = ref({
    title: ''
})
const signalsRadio1 = useRadio1Store()
let useSearch = useSearchStore()
signalsRadio1.title = value
let popularLiss = ref([])
const insearch = (data) => {
    value.value.title = data
    signalsRadio1.getsearch()
}
const getpopularLiss = () => {
    getHotSearch().then(res => {
        let {
            data: { data },
        } = res;
        console.log('12', data)
        popularLiss.value = data
    })
}
const conditions = () => {
    if (nameH1.value != '') {
        lgt.nameH1 = true
        useSearch.flg = true
        value.value.title = nameH1.value
        lgt.title = false
    } else {
        lgt.title = true
        lgt.nameH1 = false
        useSearch.flg = false
        value.value.title = ''
    }
}
onMounted(() => {
    conditions()
    getpopularLiss()
});

// 搜索
const popularSearches = () => {
    signalsRadio1.getsearch()
}


</script>

<style lang="scss" scoped>
.search_height {
    width: 100%;
    height: 251px;
    background: url('@/assets/img/sousuo_bgc.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.search_bgc {
    width: 100%;
    height: 180px;
    background: url('@/assets/img/sousuo_bgc.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.w {
    width: 1200px;
    margin: 0 auto;
}

.search_input {
    display: flex;
    flex-direction: column;

    // margin-left: 175px;

    .search_bt {
        margin: 35px 0;
        font-size: 36px;
        font-family: 'Source Han Sans CN';
        font-weight: 400;
        text-align: center;
        color: #FFFFFF;
    }

    .search_padTop {
        position: relative;
        padding-top: 0;
        text-align: center;

        .search_ss {
            // display: flex;
            width: 850px;
            height: 60px;
            border-radius: 50px;
            border: 1px solid #F6F6F6;
        }

        .search_buttons {
            position: absolute;
            top: 2px;
            right: 177px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 120px;
            height: 56px;
            background-color: #6675FF;
            border-radius: 50px;
            font-size: 22px;
            color: #fff;
        }
    }

    .search_s {
        position: relative;
        padding-top: 50px;
        text-align: center;

        .search_ss {
            // display: flex;
            width: 850px;
            height: 60px;
            border-radius: 50px;
            border: 1px solid #F6F6F6;
        }

        .search_buttons {
            position: absolute;
            top: 52px;
            right: 177px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 120px;
            height: 56px;
            background-color: #6675FF;
            border-radius: 50px;
            font-size: 22px;
            color: #fff;
        }
    }

    .popular_box {
        margin-top: 20px;
        margin-left: 175px;
        color: #FFFFFF;
    }

    .popular {
        margin-left: 15px;

    }
}
</style>